<div *ngIf="gitConfig | async as gitconfig">
  <h3 > Git Project Name {{gitconfig.name}}</h3>
  <h4 >Git Remote Url :{{gitconfig.url}}</h4>
</div>
<mat-tab-group *ngIf="gitConfig | async as gitconfig">
  <mat-tab label="Auto Gen Yaml"> 
    <kd-k8s-config-yaml [gitconfig]="gitconfig" ></kd-k8s-config-yaml>  
  </mat-tab>
  <mat-tab  *ngIf="gittask | async as gittask"  label="Ci Compile">
    <kd-card role="table">
      <div title i18n>Git Repository Manage</div>
      <div content>
        <mat-table [dataSource]="tasklist" class="mat-elevation-z8">
          <ng-container matColumnDef="id">
            <div>
              <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
              <mat-cell *matCellDef=" let element">
                {{element.git_hash.substr(0,8)}} </mat-cell>
            </div>
          </ng-container>

          <ng-container matColumnDef="dir">
            <mat-header-cell *matHeaderCellDef> Dir </mat-header-cell>
            <mat-cell *matCellDef="let element">
              <div style="overflow-x: scroll;" >{{element.dir}}
              </div>
            </mat-cell>
          </ng-container>

          <ng-container matColumnDef="commands">
            <mat-header-cell *matHeaderCellDef> commands </mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.programme}}&nbsp;{{element.command}} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="status">
            <mat-header-cell *matHeaderCellDef> status </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.state}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="begin time">
            <mat-header-cell *matHeaderCellDef> begin time </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.begin_time.substr(0,20)}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="end time">
            <mat-header-cell *matHeaderCellDef> end time </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.end_time.substr(0,20)}} </mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>
      </div>
    </kd-card>
    <mat-card class="card-demo">
      <mat-card-title>Ci Compile</mat-card-title>
      <mat-card-content class="large">
        <div fxLayout="column" fxFill>
          <div fxLayout fxFlex>
            <div class="one" fxFlex="10" fxLayoutAlign="center center">
              <mat-list role="list">
                <ng-template ngFor let-item [ngForOf]="gittask" let-i="index">
                  <mat-list-item role="listitem">
                    <button mat-raised-button color="primary"
                      (click)="ChangeLogfile(i)">#{{item.git_hash.substr(0,8)}}</button>
                  </mat-list-item>
                </ng-template>
              </mat-list>
            </div>
            <div class="two" fxFlex="90" fxLayoutAlign="center center">
              <kd-logshower [logid]="taskloguuid" [GitPipelinetask]="gittask"></kd-logshower>
            </div>
          </div>
        </div>
      </mat-card-content>
      <mat-card-footer class="bottomPad">
        <div class="hint"></div>
      </mat-card-footer>
    </mat-card></mat-tab>
  <mat-tab *ngIf="gittask | async as gittask" label="Docker Build Task"> 
    <kd-dockerimages [tasks]="gittask"></kd-dockerimages>
  </mat-tab>

</mat-tab-group>